<template>
	<scroll-view style="height: 100%;" :scroll-into-view="mark" scroll-y="true">
		<view>
			<view class="background">
				<view class="boby-box">
					<view class="sousuo">
						<image class="back-image" src="/static/wode/return.png" mode="" @tap="back"></image>
						<!-- <view class="sousuo-box">
							<view class="margin-box">
								<view class="suosou-img">
									<image src="/static/jingjie/search.png"></image>
								</view>
								<view class="sousuo-input">
									<input type="text" placeholder="输入国家或拼音查询" @input="searchAll"/>
								</view>
							</view>
						</view> -->
						<!-- <text class="sure" @tap="back">确定</text> -->
						<!-- <view class="">
							<view class="suosou-img">
								<image src="/static/jingjie/search.png"></image>
							</view>
							<input type="text" value="" placeholder="输入国家名查询"/>
						</view> -->
					</view>

					<view class="big-box">
						<view class="hidden-box">
							<view class="" v-if="type==''||type=='商业互助'||type=='交友拍拖'">
								<!-- <view class="dingwei-city">当前国家</view>
								<view @tap="selectCountry(addressInfo.regeocodeData.addressComponent.country)" class="city-name" v-if="addressInfo!=null"
								 v-text="addressInfo.regeocodeData.addressComponent.country"></view> -->
							</view>
							<view class="qingchu" v-else-if="type=='境外旅游'">
								<view class="city-name" @tap="selectAll" :class="{countryitem :allCountry==true}">
									不限
								</view>
								<view class="city-name countryitem" v-for="(item,index) in lvyouArr" :key='index'>
									<view class="text-box" :class="{countryitem2 :allCountry==true}">
										{{item}}
									</view>
									<image src="/static/wode/rightdel.png" mode="" @tap="delcountry(index)"></image>
								</view>
							</view>
							<view class="qingchu" v-else-if="type=='语言学习'">
								<view class="languageBox" v-if="kind!=''">
									<view class="city-name countryitem" v-for="(item,index) in languageArr" :key='index'>
										<view class="text-box" :class="{countryitem2 :allCountry==true}">
											{{item}}
										</view>
										<image src="/static/wode/rightdel.png" mode="" @tap="delcountry(index)"></image>
									</view>
								</view>
								<view class="" v-else>
									<view class="city-name" @tap="selectAll" :class="{countryitem :allCountry==true}">
										不限
									</view>
									<view class="city-name countryitem" v-for="(item,index) in languageArr" :key='index'>
										<view class="text-box" :class="{countryitem2 :allCountry==true}">
											{{item}}
										</view>
										<image src="/static/wode/rightdel.png" mode="" @tap="delcountry(index)"></image>
									</view>
								</view>
							</view>
							<!-- <view class="dingwei-city">常见国家</view>
							<view class="qingchu">
								<view @tap="selectCountry(item.area_name)" v-for="(item,index) in hotCountries" :key="index" class="city-name yi"
								 v-text="item.area_name"></view>
							</view> -->

							<view class="yinwenzimu" v-show="type!='语言学习'">
								<view @tap="quickSelect(item)" class="yinwenzimu-paixu" v-for="(item,index) in letters" :key="index" v-text="item"></view>
							</view>
						</view>

						<view class="city-zimu" v-if="type=='语言学习'||type=='母语'">
							<view :id="index" v-for="(item,index) in language" :key="index" class="city-duiying">
								<view @tap="selectCountry(item)" class="city-names">{{item.name}}</view>
							</view>
						</view>

						<view class="city-zimu" v-else>
							<view :id="index" v-for="(item,index) in countryData" :key="index" class="city-duiying">
								<view class="zimu">{{index}}</view>
								<view @tap="selectCountry(item2.countryName)" v-for="(item2,index2) in item" :key="index2" class="city-names">{{item2.countryName}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		countryData,
		hotCountries,
		language
	} from '../../../common/country.js'

	export default {
		components: {

		},
		data() {
			return {
				mark: '',
				countryData: countryData,
				currCountry: '',
				hotCountries: hotCountries,
				language: language,
				letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y',
					'Z'
				],
				addressInfo: null,
				type: '',
				lvyouArr: [],
				languageArr: [],
				allCountry: false,
				kind: '', //语言的种类
			}
		},
		onLoad(option) {
			if (option.type != undefined) {
				this.type = option.type
			}
			if (option.kind != undefined) {
				this.kind = option.kind
				console.log(this.kind)
			}
			if (this.type == '境外旅游') {
				this.lvyouArr = uni.getStorageSync('luyoucountryNotClear')
			}
			
			if (this.type == '语言学习') {
				if (this.kind == '') {
					this.languageArr = uni.getStorageSync('languageNotClear');
				} else if (this.kind == 'teach') {
					this.languageArr = uni.getStorageSync('teachLanguage');
				} else if (this.kind == 'more') {
					this.languageArr = uni.getStorageSync('moreLanguage');
				} else if (this.kind == 'mother') {
					this.languageArr = uni.getStorageSync('motherLanguage');
				}
			}
			
		},
		onShow() {
			
		},
		mounted() {
			console.log(this.countryData);
			this.addressInfo = uni.getStorageSync('addressInfo');
		},
		methods: {
			searchAll(e){
				var searchText=e.target.value
				var searchList=[];
				console.log(searchText,this.countryData)
				for(var i=0;i<this.countryData.length;i++){
					for(var j=0;j<this.countryData[i].length;j++){
						if(searchText==this.countryData[i][j].countryName){
						searchList.push(this.countryData[i])
					}
					}
					
				}
				Array.from(new Set(searchList))
				console.log(searchList)
			},
			selectCountry(name) {
				// console.log(this.type)
				if (this.type == '商业互助') {
					uni.setStorageSync("shangyeCountrySelect", name);
					console.log(name)
					//筛选
					var shangyecountryNotClear = uni.getStorageSync('shangyecountryNotClear');
					if (shangyecountryNotClear == '') {
						shangyecountryNotClear = [];
					} else {
						shangyecountryNotClear = shangyecountryNotClear;
					}

					if (shangyecountryNotClear.indexOf(name) == -1) {
						if (shangyecountryNotClear.length == 3) {
							shangyecountryNotClear.pop();
						}
					} else {
						shangyecountryNotClear.splice(shangyecountryNotClear.indexOf(name), 1);
					}
					shangyecountryNotClear.unshift(name);
					console.log(shangyecountryNotClear);
					uni.setStorageSync('shangyecountryNotClear', shangyecountryNotClear);
					uni.navigateBack({
						delta: 1
					})
				} else if (this.type == '交友拍拖') {
					uni.setStorageSync("jiaoyouCountrySelect", name);
					console.log(name)
					//筛选
					var jiaoyoucountryNotClear = uni.getStorageSync('jiaoyoucountryNotClear');
					if (jiaoyoucountryNotClear == '') {
						jiaoyoucountryNotClear = [];
					} else {
						jiaoyoucountryNotClear = jiaoyoucountryNotClear;
					}

					if (jiaoyoucountryNotClear.indexOf(name) == -1) {
						if (jiaoyoucountryNotClear.length == 3) {
							jiaoyoucountryNotClear.pop();
						}
					} else {
						jiaoyoucountryNotClear.splice(jiaoyoucountryNotClear.indexOf(name), 1);
					}
					jiaoyoucountryNotClear.unshift(name);
					console.log(jiaoyoucountryNotClear);
					uni.setStorageSync('jiaoyoucountryNotClear', jiaoyoucountryNotClear);
					uni.navigateBack({
						delta: 1
					})
				} else if (this.type == '语言学习') {
					if (this.kind == '') {
						this.languageArr = uni.getStorageSync('languageNotClear');
					} else if (this.kind == 'teach') {
						this.languageArr = uni.getStorageSync('teachLanguage');
					} else if (this.kind == 'more') {
						this.languageArr = uni.getStorageSync('moreLanguage');
					} else if (this.kind == 'mother') {
						this.languageArr = uni.getStorageSync('motherLanguage');
					}

					if (this.languageArr == '') {
						this.languageArr = [];
					}

					if (this.kind == 'mother') {
						this.languageArr[0] = name
					} else {
						if (this.languageArr.indexOf(name) == -1) {
							if (this.languageArr.length == 3) {
								this.languageArr.pop();
							}
						} else {
							this.languageArr.splice(this.languageArr.indexOf(name), 1);
						}
						this.languageArr.unshift(name);
					}


					console.log(this.languageArr);
					
					if (this.kind == 'teach') {
						uni.setStorageSync('teachLanguage', this.languageArr);//助学师教学语言
					} else if (this.kind == 'more') {
						uni.setStorageSync('moreLanguage', this.languageArr);//助学师掌握语言
					} else if (this.kind == 'mother') {
						uni.setStorageSync('motherLanguage', this.languageArr);//助学师母语
						uni.navigateBack({
							delta:1
						})
					}else if(this.kind==''){
						uni.setStorageSync('languageNotClear', this.languageArr);//用户掌握语言
					}
				} else if (this.type == '境外旅游') {
					uni.setStorageSync("luyouCountrySelect", name);
					console.log(name)
					//筛选
					var luyoucountryNotClear = uni.getStorageSync('luyoucountryNotClear');
					if (luyoucountryNotClear == '') {
						luyoucountryNotClear = [];
					} else {
						luyoucountryNotClear = luyoucountryNotClear;
					}

					if (luyoucountryNotClear.indexOf(name) != -1) {
						luyoucountryNotClear.splice(luyoucountryNotClear.indexOf(name), 1);
					}
					luyoucountryNotClear.unshift(name);
					console.log(luyoucountryNotClear);
					uni.setStorageSync('luyoucountryNotClear', luyoucountryNotClear);
					this.lvyouArr = luyoucountryNotClear;
					console.log(this.lvyouArr)
				} else if (this.type == '母语') {
					this.setuserData(name)
				}else{//筛选不同国家用户
					uni.setStorageSync('userCountry',name)
					uni.navigateBack({
						delta:1
					})
				}

			},
			delcountry(index) {
				if (this.type == '境外旅游') {
					this.lvyouArr.splice(index, 1)
					uni.setStorageSync('luyoucountryNotClear', this.lvyouArr);
					if (this.lvyouArr.length == 0) {
						uni.removeStorageSync('luyoucountryNotClear')
					}
				} else if (this.type == '语言学习') {
					this.languageArr.splice(index, 1)
					if (this.kind == 'teach') {
						uni.setStorageSync('teachLanguage', this.languageArr);//助学师教学语言
					} else if (this.kind == 'more') {
						uni.setStorageSync('moreLanguage', this.languageArr);//助学师掌握语言
					} else if (this.kind == 'mother') {
						uni.setStorageSync('motherLanguage', this.languageArr);//助学师母语
					}else if(this.kind==''){
						uni.setStorageSync('languageNotClear', this.languageArr);//用户掌握语言
					}
					
					if (this.languageArr.length == 0) {
						uni.removeStorageSync('languageNotClear')
					}
				}
			},
			selectAll() {
				if (this.allCountry == false) {
					this.allCountry = true
				} else {
					this.allCountry = false
				}
			},
			back() {
				if (this.allCountry == true) {
					if (this.type == '境外旅游') {
						uni.removeStorageSync('luyoucountryNotClear')
						uni.setStorageSync('luyoucountryNotClear', ['不限'])
					} else if (this.type == '语言学习') {
						uni.removeStorageSync('languageNotClear')
						uni.setStorageSync('languageNotClear', ['不限'])
					}
				}
				uni.navigateBack({
					delta: 1
				})
			},
			setuserData(name) {
				var me = this
				var data = {
					user_id: uni.getStorageSync('user_id'),
					mother_tongue: name
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'update',
					data: data,
					successBack: function(res) {
						console.log(res)
						me.getuserData()
					},
				})
			},
			getuserData() {
				var me = this
				var data = {
					user_id: uni.getStorageSync('user_id'),
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserInfoById',
					data: data,
					successBack: function(res) {
						console.log(res)
						uni.setStorageSync('user_info', res.data.data.userInfoEntity)
						uni.navigateBack({
							delta: 1
						})
					},
				})
			}
		},

	}
</script>

<style scoped>
	.boby-box {
		position: relative;
		height: 100%;
		background-color: #ffffff;
	}

	.background {
		height: 100%;
		background: #fff;
	}

	.header {
		width: 100%;
		height: 60upx;
	}

	.sousuo {
		padding-left: 24upx;
		height: 128upx;
		width: 100%;
		padding-bottom: 18upx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		top: 0;
		align-content: center;
		background: #FFFFFF;
		z-index: 9999;
		/* box-sizing: border-box; */
	}

	.back-image {
		height: 36upx;
		width: 20upx;
		margin-right: 32upx;
		position: absolute;
		top: 80upx;
	}
	.sure{
		color: #333333;
		font-size: 32upx;
		position: absolute;
		top:80upx;
		right: 48upx;
	}

	.sousuo-box {
		height: 60upx;
		background-color: #ebeced;
		display: flex;
		border-radius: 10upx;
		position: absolute;
		top: 70upx;
		left: 135upx;
	}

	.margin-box {
		width: 470upx;
		height: 60upx;
		margin: auto;
	}

	.suosou-img {
		width: 10%;
		height: 60upx;
		float: left;
		text-align: right;
		line-height: 60upx;
	}

	.suosou-img image {
		width: 35upx;
		height: 30upx;
	}

	.sousuo-input {
		width: 90%;
		height: 60upx;
		line-height: 60upx;
		float: left;
	}

	.sousuo-input input {
		height: 60upx;
		line-height: 60upx;
		font-size: 30upx;
		color: #666666;
		padding-left: 15upx;
	}

	.dangqian {
		height: 90upx;
		padding-right: 50upx;
	}

	.dangqian-box {
		height: 90upx;
		border-top: 1upx solid #d8d8d8;
		border-bottom: 1upx solid #d8d8d8;
		padding-left: 50upx;
		display: flex;
	}

	.dangqian-city {
		float: left;
	}

	.xuanze-quxian.yi {
		margin-left: 10upx;
	}

	.xuanze-quxian {
		height: 90upx;
		line-height: 90upx;
		font-size: 30upx;
		color: black;
		float: left;
	}

	.big-box {
		height: auto;
		/* margin-right: 30upx; */
		margin-top: 148upx;
	}

	.hidden-box {
		border-bottom: 1upx solid #D8D8D8;
		border-top: 1upx solid #D8D8D8;
		height: auto;
		padding-left: 24upx;
		position: relative;
		background-color: #f4f4f4;
	}

	.dingwei-city {
		color: #999999;
		font-size: 30upx;
		margin-top: 20upx;
	}

	.qingchu {
		overflow: auto;
		padding-bottom: 30upx;
		display: flex;
		flex-wrap: wrap;
	}

	.languageBox {
		display: flex;
	}

	.city-name {
		width: 158upx;
		height: 80upx;
		border: 1upx solid #d8d8d8;
		border-radius: 10upx;
		font-size: 24upx;
		color: black;
		text-align: center;
		line-height: 80upx;
		margin-top: 20upx;
		margin-right: 10upx;
		background: #E6E6E6;
		overflow: hidden;

	}

	.text-box {
		width: 158upx;
		height: 80upx;
		overflow: hidden
	}

	.city-name.yi {
		margin-right: 20upx;
		float: left;
	}

	/* .city-name:nth-child(3n) {
		margin-right: 0upx;
	} */

	.yinwenzimu {
		width: 30upx;
		height: auto;
		position: fixed;
		top: 300upx;
		right: 0;
	}

	.yinwenzimu-paixu {
		width: 33upx;
		height: 40upx;
		line-height: 40upx;
		font-size: 22upx;
		color: #06c1ae;
		text-align: center;
	}

	.city-zimu {
		padding-left: 24upx;
		height: auto;
	}

	.city-duiying {
		height: auto;
	}

	.zimu {
		font-size: 24upx;
		color: #999999;
		height: 60upx;
		line-height: 60upx;
	}

	.city-names {
		height: 90upx;
		line-height: 90upx;
		font-size: 30upx;
		color: black;
		border-bottom: 1upx solid #d8d8d8;
	}

	.countryitem {
		background: #FFFFFF;
		color: #46CECF;
	}

	.countryitem2 {
		background: #E6E6E6;
		color: #333333;
	}

	.countryitem image {
		width: 44upx;
		height: 36upx;
		position: relative;
		top: -50upx;
		right: -60upx;
	}
</style>
